<template>
  <div style="height: 100vh;overflow: hidden;" class="max-box">
    <section class="wrapper">
      <div class="container">
        <div id="scene" class="scene" data-hover-only="false">
          <div class="circle" data-depth="1.2"></div>
          <div class="one" data-depth="0.9">
            <div class="content">
              <span class="piece"></span>
              <span class="piece"></span>
              <span class="piece"></span>
            </div>
          <div class="two" data-depth="0.60">
          	<div class="content">
          		<span class="piece"></span>
          		<span class="piece"></span>
          		<span class="piece"></span>
          	</div>
          </div>
          <div class="three" data-depth="0.40">
          	<div class="content">
          		<span class="piece"></span>
          		<span class="piece"></span>
          		<span class="piece"></span>
          	</div>
          </div>
          </div>
          <p class="p404" data-depth="0.50">404</p>
          <p class="p404" data-depth="0.10">404</p>
        </div>
        <div class="text">
          <article>
            <p>Uh oh! 看来你迷路了。<br>请点击按钮返回首页！</p>
            <button @click="$router.replace('/home/index')">返回首页</button>
          </article>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  export default {
    name: "error",
  }
</script>

<style scoped>
  @import url("../../assets/css/style.css");
</style>
